import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { IContentProps } from '../../pages/home/schemas'
import XDivider from '../../components/XDivider'
import './Content.scss'

interface IProps extends IContentProps {
    isList: boolean;
}

export default class extends Component<IProps, {}> {
    
    render() {
        
        const { data = {}, isList } = this.props
        
        return (
            <View className={classnames('inner', { 'inner-vertical': data.status === 0, 'inner-horizontal': data.status === 1 })}>
                <View className={classnames('title', { 'h': data.status === 1 })}>
                    {
                        isList
                        ?
                        data.banner.map(cell => (
                            <View className='paragraph' key={cell.id}>
                                <Text className='text'>{cell.title}</Text>
                                {/* <Text className='price'>￥245</Text> */}
                            </View>
                        ))
                        :
                        <View className='paragraph'>
                            <Text className='text'>{data.banner[0].title}</Text>
                            {/* <Text className='price'>￥245</Text> */}
                        </View>
                    }
                </View>
                <View className='brief'>
                    <View className='caption'>
                        {
                            isList &&
                            <Text className='icon'>{data.status === 1 ? '已参与' : '已结束'}</Text>
                        }
                        {
                            isList &&
                            <XDivider />
                        }
                        <Text className='text'>{data.status === 1 ? `${data.endTime} 按人数自动开奖` : '参与人数满3000自动开奖'}</Text>
                    </View>
                    {/*
                        isList && data.status === 1 && <Text className='text'>共1人参加</Text>
                    */}
                </View>
            </View>
        )
    }

    static propTypes = {
        data: PropTypes.object,
        isList: PropTypes.bool,
    }

    static defaultProps = {
        data: {
            status: 0,
            endTime: ''
        },
        isList: true
    }
}